<style type="text/css" lang="scss">
.v-modal{
  z-index: 200 !important;
}
.el-popover{
  min-width: 50px;

}

.i-model-file {
  z-index:199;
  .__header {
    height: 20px;
    line-height: 20px;
    border-left: 5px solid #0099ff;
    padding-left: 5px;
  }

  .__upload_action {
    height: 60px;

    padding-left: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
    display: flex;
    justify-content: space-between;
    align-items: center;
    .__move-del{
      padding-right: 20px;
        .el-button{
          width:auto;
        }
    }
  }

  .el-dialog__body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 460px;
    display: flex;
    /*设为伸缩容器*/
    flex-flow: row;
    /*伸缩项目单行排列*/
    border-bottom: 1px solid #e8eaec;
  }

  .el-upload__tip {
    display: inline-block;
    padding-left: 10px;
  }

  .__menu {
    width: 200px;
    overflow-y: auto;
    .__addGroup,.__editGroup{
      margin: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      .el-input__inner{
        line-height: 28px;
        height: 28px;
        padding: 0 6px;
      }
      .__add{
        width:32px;
        height: 28px;
        border:solid 1px #efefef;
        border-radius: 5px;
        line-height: 28px;
        text-align:center;
        cursor: pointer;
        margin-left: 5px;
        font-size: 28px;
        color: #ededed;
        &:active{
          background-color: #ededed;
        }
      }
    }
    .__addGroup{
      margin-bottom: 10px;
    }
    .__editGroup{
      margin: 0px;
      .__edit{
        margin-left: 5px;
      }
    }
  }

  .el-menu-vertical {
    height: 459px;
  }

  .__content {
    height: 460px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    flex: 1;
  }

  .ivu-menu-light {
    height: 460px;
  }

  .el-dialog__footer {
    padding: 0 0 12px 0;
    text-align: left;
  }

  .__select_list {
    height: 100px;
    width: 100%;
    border-bottom: 1px solid #e8eaec;
    margin-bottom: 10px;
    text-align: left;
  }

  .__select_img_list {
    width: calc(100% - 60px);
    height: 100px;
    overflow: hidden;
    overflow-x: auto;

    .__select_box {
      width: 1000%;
      margin-top: 5px;
    }

    .__select_wrap {
      float: left;
      width: 90px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f3f3f3;
      margin-left: 10px;
      position: relative;
      img {
        max-width: 100%;
        max-height: 100%;
        min-width: 1px;
        min-height: 1px;
        width: auto;
        height: auto;
        border: 0;
        vertical-align: top;
      }
      .__select_del{
        width:20px;
        height: 20px;
        background-color:rgba(0,0,0,0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 0px;
        top: 0px;
        color:#FFF;
        cursor: pointer;
      }
      .__select_del:hover{
        background-color:rgba(255,0,0,0.5);
      }
    }
  }

  .__page_postion {
    text-align: right;
    margin-right: 40px;
  }

  .__select_title {
    width: 60px;
    height: 100px;
    line-height: 25px;
    text-align: center;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
    border-right: 1px solid #e8eaec;
  }

  .__footer_action {
    text-align: center;
    .el-button{
      width:auto;
    }
    .ivu-btn {
      width: 100px;
    }
  }
}
.__icon-lists{
  i{
    margin-left: 5px;
    cursor: pointer;
    color: #409EFF;
  }
  i:first-child{
    margin-left:0px;
  }
}
.move-class{
  .__form-row{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      >label{
        width:140px;
        text-align:right;
    }
  } 
  .__footer_action {
    margin-top: 10px;
    text-align: center;
    .el-button{
      width: auto !important;
    }
  }

}
</style>

<template>
  <div :style="`min-width:${ width ? width :'690px'}`">
    <div class="i-model-box-botton" @click="dialogVisible = true">
      <slot />
    </div>
    <el-dialog title="图文管理器" class="i-model-file" :visible.sync="dialogVisible" width="800px">
      <div class="__menu">
        <el-menu default-active="0" class="el-menu-vertical" @select="onSelect">
          <el-menu-item index="0">
            <i class="el-icon-setting"></i>
            <span slot="title">默认分组</span>
          </el-menu-item>
          <el-menu-item v-for="item,index in groupValue" :index="`${item.group_id}`" :key="index">
            <div v-if="editValue.group_id == item.group_id">
              <div class="__editGroup">
                <el-input type="input" v-model="editValue.group_name"></el-input>
                <span class="__edit" @click="saveEditGorup">确定</span>
              </div>
            </div>
            <el-popover v-else placement="right" trigger="hover">
              <div class="__icon-lists">
                <i class="el-icon-edit" @click="editGorup(item)"></i>
                <i class="el-icon-delete"  @click="delGroup(item)"></i>
              </div>
              <div slot="reference">
                <i class="el-icon-setting"></i>
                <span slot="title">{{item.group_name}}</span>
              </div>
            </el-popover>
          </el-menu-item>
          <div class="__addGroup">
            <el-input type="input" v-model="groupName"></el-input>
            <span class="__add" @click="addGroup">+</span>
          </div>

        </el-menu>
      </div>
      <div class="__content">
        <div class="__upload_action">
<!--           <el-select placeholder="请选择">
            <el-option label="item.label" value="item.value"></el-option>
          </el-select> -->
            <el-upload :show-file-list="false" :action="action" multiple :on-success="handleSuccess" :on-error="handError" :data="prams">
              <el-button size="small" type="primary">点击上传</el-button> 
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

            <el-button-group class="__move-del">
              <el-button type="warning" :disabled="disabled" size="small" @click="onMove">移动分类</el-button>
              <el-button type="danger" :disabled="disabled"  size="small" @click="onDel">删除图片</el-button>
            </el-button-group>
        </div>
        <ModelContent v-if="select_menu =='default'" v-model="selectImgs" :images="images" :limit="limit" :sub='index' />
        <div class="__page_postion">
          <el-pagination background :size-change="pagesize" layout="prev, pager, next" :total="total" :current-page="prams.page" @current-change="handlerPage" >
          </el-pagination>
        </div>
      </div>
      <div slot="footer">
        <div class="__select_list">
          <div class="__select_title">
            <p>待添加</p>
            <p>{{selectImgs.length}}/{{limit}}</p>
          </div>
          <div class="__select_content">
            <div class="__select_img_list">
              <div class="__select_box" v-for="item,index in selectImgs" :key="index">
                <div class="__select_wrap">
                  <span class="__select_del" @click="onCancelSelect(index)">X</span>
                  <img :src="item.file_name" />
                </div>
              </div>
              </div>
            </div>
          </div>
          <div class="__footer_action">
            <el-button type="primary" @click="intSave">确定</el-button>
            <el-button @click="del">取消</el-button>
          </div>
        </div>
    </el-dialog>


    <!-- 选择分类 -->
    <el-dialog title="选择分组" :visible.sync="moveStatus" width="30%" class="move-class">
        <el-form ref="form">
            <el-form-item>
                <div class="__form-row">
                  <label>选择分类：</label>
                  <el-select v-model="moveData.group_id" placeholder="请选择移动分组">
                    <el-option label="默认分组" value="0"></el-option>
                    <el-option
                      v-for="item,index in groupValue"
                      :key="index"
                      :label="item.group_name"
                      :value="item.group_id">
                    </el-option>
                  </el-select>
                </div>
            </el-form-item>
        </el-form>
        <div class="__footer_action">
          <el-button type="primary" @click="onMoveClass" size="mini">确定</el-button>
          <el-button size="mini" @click="moveStatus = false">取消</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
import ModelContent from './content.vue';
export default {
  components: {
    ModelContent,
  },
  props: {
    //选中的图片
    value: [Array, Object, String],
    //选中图片的数量
    limit: {
      type: [Number, String],
    },
    // 控件可操作宽度
    width:{
      type:String,
      default:'690px'
    },
    //
    index:{
      type:[String,Number],
      default:0,
    },
    // 图片上传api地址
    url:String,
    // 图片数据源
    images:{
      type:[Array,Object],
      default:function(){
        return [];
      }
    },
    /**
     * 分页总条数
     * @type {Object}
     */
    total:{
      type:[String,Number],
      default:0
    },
    /**
     * 图文分组
     * @type {Object}
     */
    groupValue:{
      type:[Array,Object],
      default:function(){
        return [];
      }
    }

  },
  data() {
    return {
      uploadData:{},         //图片上传额外的参数

      groupName:'',
      editValue:{},           //编辑数据

      dialogVisible: false,
      modal_loading: false,
      select_menu: 'default',
      pagesize: 15,
      action: '',
      uploadList: '',
      // 选择添加的图片        
      selectImgs: [], //选中的图片
      prams: {
        group_id: 0,
        page: 1
      },

      /**
       * 移动分组与删除图片功能的开启与关闭
       * @type {Boolean}
       */
      disabled:true,
      moveStatus:false,
      moveId:'',
      moveData:{
        group_id:'',
        file_id:'',
      }

    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    value:{
      handler(val,old){
        this.selectImgs = val;
      },
      deep:true,
    },

    /**
     * 移动和删除功能开启与关闭
     * @type {Object}
     */
    selectImgs:{
      handler(val,old){
        if(val.length > 0){
          this.disabled = false;
        }else{
          this.disabled = true;
        }
        // console.log(val.length)
      },
      deep:true,
    }

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

    this.action = this.url;
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    /**
     * 分页功能
     * @param  {[type]} page [description]
     * @return {[type]}      [description]
     */
    handlerPage(page){
        this.prams.page = page;
        // 重新获取数据
        this.$emit('click',this.prams);
    },

    // 筛选出选中图文的ID组
    _intScreen(){
        var res = '';
        if(this.selectImgs.length == 1 ){
          res = this.selectImgs[0].file_id;
        }else{
          var array = [];
          for(var key in this.selectImgs){
            {this.selectImgs[key]}
            array.push(this.selectImgs[key].file_id);
          }
          res = array;
        }
        return res;
    },


    /**
     * 移动分组
     * @return {[type]} [description]
     */
    onMove(){
        /**
         * 打开对话框
         * @type {Boolean}
         */
        this.moveStatus = true;
    },
    /**
     * 提交移动分组
     * @return {[type]} [description]
     */
    onMoveClass(){
        if(!this.moveData.group_id){
          this.$message({
            message: '请选择分类！',
            type: 'warning'
          });
        }

        this.moveData.file_id = this._intScreen();

        this.$emit('handlerGroup',{type:'move',data:this.moveData});
 
        this.moveStatus = false;
    },


    // 添加分组
    addGroup(){
      if(!this.groupName){
        this.$message.error('分类名称不能为空！');
        return false;
      }

      // 数据交互
      var data = {
         group_name:this.groupName,
      }

      this.$emit('handlerGroup',{type:'add',data:data});

      //清空输入框
      this.groupName = '';
    },


    /**
     * 修改图文分组
     * @param  {[type]} data [description]
     * @return {[type]}      [description]
     */
    editGorup(data){
      this.editValue = data;
    },
    saveEditGorup(){
      if(!this.editValue.group_name){
        this.$message.error('分类名称不能为空！');
        return false;
      }

      
      this.$emit('handlerGroup',{type:'edit',data:this.editValue});

      this.editValue = {};
      this.editValue.group_id = '';
    },

    /**
     * 删除图文分组
     * @param  {[type]} data [description]
     * @return {[type]}      [description]
     */
    delGroup(data){
      this.$confirm('你确定删除该分组吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$emit('handlerGroup',{type:'del',data:data});

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });

      // console.log('删除图文分组')
    },


    /**
     * 选择分组
     * @param  {[type]} index [description]
     * @return {[type]}       [description]
     */
    onSelect(index){
      this.prams['page'] = 1;
      this.prams['group_id'] = index;

      /**
       * 获取分组图片
       */
      this.$emit('click',this.prams);
    },

    /**
     * 删除图文
     * @return {[type]} [description]
     */
    onDel(){
      this.$confirm('删除后将不可恢复，是否继续?', '永久删除该图片！', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        var  filesArray = this._intScreen();
        var data = {
          file_id:filesArray,
        }

        this.$emit('detele',data);
        this.selectImgs = [];
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },



    onSekectMenu(name) {
      this.select_menu = name
    },

    del() {
      this.dialogVisible = false;
    },
    intSave() {
      if (!this.selectImgs.length > 0) {
        this.$message({
          message: '请选择图片！',
          type: 'warning'
        });
        return false;
      }
      this.$emit('input', this.selectImgs);
      this.dialogVisible = false;
    },



    /**
     * 上传成功之后
     * @param  {[type]} res  [description]
     * @param  {[type]} file [description]
     * @return {[type]}      [description]
     */
    handleSuccess(res, file) {
      // console.log('成功', res, file);
      if (res.code == 0) {
        this.$emit('click',this.prams);
      }
      // console.log('res',res);
    },
    handError(file) {
      console.log('错误', file);
    },




    /**
     * 取消选中的图片
     * @param  {[type]} item [description]
     * @return {[type]}      [description]
     */
    onCancelSelect(index){
      this.selectImgs.splice(index,1)
    }



  }
}

</script>
